<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
     <link rel="stylesheet" href="../../css/webuploader.css" />
     <style>
         .preview-list{
            width: 1200px;
            min-height: 200px;
            padding: 20px;
            border: 1px dashed #666;
            margin: 50px auto;
         }
        
        .btn-wrap{
            width: 1200px;
            margin: 20px auto;
        }
         .choose-file{
            width: 200px;
            height: 80px;
            margin-bottom: 20px;
         }
     </style>
</head>
<body>
    <div class="preview-list"> </div>

    <div class="btn-wrap">
        <div class="choose-file"></div>
        <button id="upload_btn" type="button">立即上传</button>
        <button id="retry_btn" type="button">重新上传</button>
    </div>
    


    <script src="../../jquery-1.11.3.min.js"></script>
    <script src="../../webuploader.js"></script>
    <script src="../../UploadPreview.js"></script>
    <a href="../../Uploader.swf" id="uloader_swf"></a>
    <script>
        var uploadPreview =new UploadPreview({
            url: "upload.php",
            swf: document.getElementById("uloader_swf").href,
            previewInfo: {
                previewWrap: ".preview-list"
            },
            btns: {
                chooseBtn: ".choose-file",
                chooseBtnText: "选择文件",
                uploadBtn: document.getElementById("upload_btn"),
                retryBtn: document.getElementById("retry_btn")
            },
            uploadError: function (file,reason){
                console.log('上传失败代码：' + reason);
            },
            uploadSuccess: function (file,response){
                //这里的上传成功指的是上传请求发送成功，图片是否真正上传到服务还得根据服务器返回的数据(response)来判断
                consoel.log(response);
            }
        });
        //通过uploadPreview.uploader可以获取百度webuplaoder对象的实例
        console.log(uploadPreview.uploader);
    </script>
</body>
</html>